﻿<template>
  <div class="git_Exchange_contain" ref="git_contain">
    <Header_other v-bind:header_name="header_name"></Header_other>

    <!-- nav s-->
    <div class="header_select" style="position:fixed;top:3.2rem;width:100%;width:100%;z-index:100">
      <div class="base_btn" v-bind:class="{act:base_btn_click[0]}" v-on:click.self="base_btn_click_s(0)">
            浪漫排行
        <div class="sun_base_btn_wrap" v-show="base_btn_click[0]">
          <div class="sub_base_bnt sub_base_bnt_act" v-on:click="get_data('进行中')">
            进行中
          </div>
          <div class="sub_base_bnt" v-on:click="get_data('预告')">
            预告
          </div>
        </div>
      </div>
      <!--<div class="base_btn">
            浪漫之图
      </div>
      <div class="base_btn">
            浪漫活动
      </div>
      <div class="base_btn">
            排行榜
      </div>-->
    </div>
    <!-- nav e-->

    <!-- gap s -->
    <div style="height:2.2rem"></div>
    <div style="height:35px"></div>
    <!-- gap e -->

    <!-- main container s -->
    <div class="main_container">
      <!-- scroll_wrap s-->
      <div id="wrap_scroller">
        <div style="height:20vw;">&nbsp;</div>
        <scroller :on-refresh="refresh"
                  :on-infinite="infinite" class="clearfix">
          <!-- content goes here -->
          <div class="" ref="el" id="scroller">
            <!-- content goes here -->
            <!-- box s-->
             <div class="langman" v-on:click="goTo_activity(list.id)" v-for="list in menu_list">
               <div class="langman_header">
                  {{list.title}}
               </div>
               <div class="simple_list">
                  <div class="simple_list_header">
                 {{list.content}}
                  </div>
                 <img class="langman_img" v-bind:src="list.cover|rank_index_img" />
               </div>
               <div class="simple_list_bottom">
                 <div class="simple_list_time">
                   时间 &nbsp; &nbsp;{{list.releaseTime|format_date('YMDHMS')}}
                 </div>
                 <div class="simple_list_people">
                   报名人数 &nbsp; &nbsp;{{list.population}}
                 </div>
               </div>
             </div>
            <!--<music_box></music_box>-->
            <!-- box e -->
            <!--<music_box class="mar_Top"></music_box>-->
          </div>
        </scroller>
      </div>
      </div>
    <!-- main container e -->

    <!--<bottom></bottom>-->
    </div>
</template>

<script>
  import {mapState, mapMutations,mapActions,mapGetters} from 'vuex';
  import Header_other from "./header_other/Header_other.vue";
  import music_box from "./music_box.vue";
  import { Toast, Indicator } from 'mint-ui';
  import axios from 'axios';
  import Vue from "vue";
  axios.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8';
  Vue.prototype.$http = axios;
  import common from "../common/common.js"
  //limit_Scroll
  //import limit_scroll from "../../static/js/limit_scroll.js"
  var qs = require('qs');
  import "../filter/filter.js"
  import bottom from "../index/FooterMenu.vue"
  //axios.post('/foo', qs.stringify({ 'bar': 123 }));
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      show_layer:false,
      get_layer_show: this.$store.getters.get_layer_show,
      layer_show: false,
      header_name: "浪漫排行",
      layer_give_friend_data: false,
      give_other_data: false,
      this_box_msg: {},
      menu_list: [],
      base_btn_click: [false],
      data_type:""
    }
  },
  ...mapActions([
    "thom_redirect",

  ]),
  ...mapMutations([
     "Change_certain_layer"
  ]),
  mounted: function (){
    this.get_data("进行中");
    this.data_type = "进行中"
    mui.plusReady(function () {
      plus.webview.currentWebview().setStyle({
        'popGesture': 'none'
      });
    })
  },
  methods: {
    ///Letter_box
    //get_data
    get_data: function (course,done) {
      this.data_type = course;
      this.base_btn_click[0] = false;
      let id = location.search.split("user_id=")[1];
      sessionStorage.setItem("user_id", id);
      Indicator.open();
      let base_url = common.get_base_url();
      this.$http.post(base_url+'/yizhiweimen/api/user/activity/getActivityByType',
        qs.stringify(
          {
            'pageNo':'1',
            "pageSize":'10',
            "course": course
        })
        )
        .catch((thrown) => {
          Indicator.close();
          console.log(thrown);

        }).then((e) => {
          try {
            done()
          } catch (e){
            console.log(e);
          }
          Indicator.close();
          console.log(e.data);
          this.menu_list = e.data;

        })
    },
    //跳转
    goTo_activity: function (id) {
      console.log("goTo_activity");
      sessionStorage.setItem("rank_id", id);
      this.$store.dispatch("thom_redirect",
      {
          name: "/activity", router: this.$router
      });
    },
    //下拉
    ...mapGetters([
      "get_ajax_base"
    ]),
    base_btn_click_s: function (id) {
      //let length = base_btn_click.length;
     this.base_btn_click.forEach((item, i) => {
       //console.log(item, i);
       if (i != id) {
         this.base_btn_click[i] = false;
       }
      });
     this.$set(this.base_btn_click, id, !this.base_btn_click[id]);
    },
    refresh: function (done) {
      this.get_data(this.data_type,done)
    },
    //上啦
    infinite: function (done){
      setTimeout(function () {
        done(true);
      },1000)
    },
    //弹出层
    layer_give_friend_f: function () {
      this.layer_give_friend_data = !this.layer_give_friend_data;
    },
    give_other: function () {
      this.give_other_data = !this.give_other_data
    },
    hide_detail_1: function () {
      this.layer_show = false;
    },
    //页面跳转
    goTo: function () {
      this.$store.dispatch("thom_redirect",{name:"/letter/SucLetter",router:this.$router});
    },
    open_certain_btn:function () {
        //show_layer 判断显示
      this.$store.dispatch("thom_redirect",
      {
          name:"/Index_main/Wrap_certain_layer/Certain_layer_input",router:this.$router
      });
    },
    goTo_letter_man:function() {
      this.$store.dispatch("thom_redirect",
      {
          name: "/Letter_man", router: this.$router
      });
    }
  },
  components: {
    Header_other,
    music_box,
    bottom
  }
}
</script>
<style scoped>
  .mar_Top{
    margin-top:10vw;
  }
  /*langman box s */
  .simple_list_people {
    margin-right: 6vw;
    font-size:3vw;
  }
  .simple_list_time {
    margin-left: 3vw;
    font-size:3vw;
  }
  .simple_list_bottom {
    height: 32px;
    border-radius: 0 0 2vw 2vw;
    line-height: 32px;
    font-size: 14px;
    color: #9f5c2f;
    justify-content:space-between;
    display: flex;
  }
  .langman_img {
    max-width: 85vw;
    margin: 0 auto;
    border-radius: 2vw;
    height: 20vw;
    display: block;
    /*box-shadow: 2px 2px 1px 2px rgba(74, 72, 72, 0.2);*/
  }
  .simple_list_header {
    overflow: hidden;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    font-size: 12px;
    padding-top: 7px;
    letter-spacing: 1px;
    padding-bottom: 11px;
    width: 81vw;
    margin: 0 auto;
    text-align: left;
  }
 .simple_list {
    height: 33vw;
    background-color: #dea675;
    color: #fff;
  }
  .langman_header {
    background-color: #9f5c2f;
    color: #fff;
    font-size: 14px;
    height: 30px;
    border-radius: 2vw 2vw 0 0;
    line-height: 30px;
  }
  .langman {
    margin: 4vw auto 0;
    width: 90vw;
    border-radius: 2vw;
    box-shadow: 2px 2px 4px 4px #afafaf;
  }
  /*langman box e*/
  /*header_select s*/
  .header_select {
    line-height: 12vw;
    height: 12vw;
    background-color: #fff;
    display: flex;
    font-size: 0.7rem;
    color: #563117;
    text-align: center;
  }
  .git_Exchange_contain .header_select .act {
    background-color: #563117;
    -moz-box-shadow: -1px 0px 10px #3a210f inset; /* For Firefox3.6+ */
    -webkit-box-shadow: -1px 0px 10px #3a210f inset; /* For Chrome5+, Safari5+ */
    box-shadow: -1px 0px 10px #3a210f inset; /* For Latest Opera */
    background: url("../../static/img/tri_hd_up.png") no-repeat 21vw;
    background-size: 3vw;

  }
  .header_select .base_btn {
    width: 25vw;
    background: url("../../static/img/tri_hd.png") no-repeat 21vw;
    background-size: 3vw;
    position:relative;
  }
  .sun_base_btn_wrap {
    width: 27vw;
    background-color: #734424;
    top: 34px;
    left: 5vw;
    z-index: 1000;
    position: absolute;
  }
  .sun_base_btn_wrap .sub_base_bnt_act {
    background-color: #62391d;
  }
  .sun_base_btn_wrap .sub_base_bnt {
    width: 100%;
    height: 42.5px;
    line-height: 42.5px;
    text-align: center;
    color:#fff;
  }
  /*header_select e*/
  .Letter_box_letter {
    text-align: center;
    color: #9f5c2f;
    font-size: 0.7rem;
    background-color: #fff;
    padding: 1.3rem 3.2rem;
    border-radius: 2vw;
    width: 61%;
    margin-bottom: 1rem;
    box-shadow: 2px 2px 4px 2px rgba(180, 180, 180, 0.62);
    margin-top: 0.2rem;
  }
  .letter_box_right_btn .gz_btn {
    color: #fff;
    background-color: #9f5c2f;
  }
  .btn_base {
    float: left;
    padding: 0.2rem 0.5rem;
    font-size: 0.6rem;
    margin-top: 1.15rem;
    border: 2px solid #9f5c2f;
    color: #9f5c2f;
    border-radius: 1.2vw;
    margin-right: 0.1rem;
    text-align: center;
  }
  .letter_box_right_btn {
    float: right;
  }
  .Letter_box {
    width: 90%;
    margin: 1rem auto 0;
  }
  .letter_box_id {
    font-size: 0.7rem;
    color: #9f5c2f;
    margin-left:0.2rem;
    margin-top:0.1rem;
  }
  .leftter_box_right {
    float: left;
  }
  .bz_nane {
    padding: 0.35rem 0.75rem;
    background-color: #9f5c2f;
    border-radius: 1vw;
    color: #fff;
    text-align: center;
    font-size: 0.6rem;
    margin-left: 0.2rem;
    width:50%;
    letter-spacing:1px;

  }
  .letter_box_head {
    display: block;
    width: 2rem;
    height: 2rem;
    border: 2px solid #9f5c2f;
    float: left;
    border-radius: 1vw;
  }
  #wrap_scroller {
    //transform:translateY(20px);
    height: 28.4rem;
  }
  .box_bottom_wrap {
    margin-top: 0.3rem;
    padding-left: 5%;
    padding-right: 5%;
  }
  .m_L_15 {
    margin-left: 2vw;
  }
  .box_bottom_wrap .red_c {
    color: #e85454;
    border: 2px solid #e85454;
  }
  .box_base_btn {
    width: 20%;
    font-size: 0.7rem;
    height: 1.25rem;
    line-height: 2;
    border-radius: 2vw;
    border: 2px solid #9f5c2f;
    color: #9f5c2f;
  }
  .box_list li {
    width: 48%;
  }
  .box_list {
    border-radius:2vw;
    background-color: #eeeeee;
    flex-wrap: wrap;
    font-size: 0.7rem;
    line-height: 2.45rem;
    width: 11.75rem;
    display: flex;
  }
  .box_header_wrap {
    padding-left:1.4vw;
    padding-top:0.35rem;
    display: flex;
    justify-content: space-between;
  }
  .bor_bot {
    border-bottom: 1px solid #dfdfdf
  }
  .border_L {
    border-right: 1px solid #dfdfdf;
  }
  .box_img_s {
    display:block;
    width: 4.75rem;
    height: 4.75rem;
    border-radius: 2vw;
    border: 2px solid #e9c7ac;
  }
  .box {
    height: 7.5rem;
    width: 93%;
    background-color: #fff;
    border-radius: 2vw;
    margin: 0.6rem auto;
    box-shadow: 0 2px 8px 2px rgba(180, 180, 180, 0.62);
  }
  .wenhao_img {
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    position: absolute;
    top: 50%;
    right: 2vw;
    transform: translateY(-50%);
  }
   .main_container {
      height:100%;
      background-color: #eeeeee;
  }
  .main_container_header {
    position:relative;
    height: 1.75rem;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    /*justify-content:space-between;*/
    font-size: 0.7rem;
    line-height: 2.6;
    color: #b4b4b4;
  }
  .main_container_header_act {
    color: #9f5c2f;
  }
  ._v-container{
    top:none;
    position:relative;
  }
  .git_Exchange_contain {
    height: 100%;
    padding-top: 5.3vw;
  }
</style>
